class Click{
    constructor(obj){
        if(typeof obj.el === 'string'){
            this.el = document.querySelector(obj.el)
        }else{
            this.el = obj.el
        }
        this.bg = obj.bg || 'blue'
        this.h5 = obj.h5 || 'yes!成功！'
        this.p = obj.p || ''
        this.span = obj.span || ''
    }
   
}
class AlertFn extends Click{
    constructor(obj){
        super(obj)
        this.clickFn()
    }
    clickFn(){
        this.el.addEventListener('click',()=>{
            this.alert = document.querySelector('.alert')
            this.alert.style.display = 'block'
            this.alert.innerHTML = `<div class="content">
                                        <div>
                                            <span>${this.span}</span>
                                            <div>
                                                <h5>${this.h5}</h5>
                                                <p>${this.p}</p>
                                            </div>
                                        </div>
                                        <div ><button id='ok'>好的</button></div>
                                    </div>`
            this.btn = document.querySelector('#ok')
            document.querySelector('span').style.color = this.bg
            this.btn.style.background = this.bg
            this.btnFn()
        })
    }
    btnFn(){
        this.btn.addEventListener('click',()=>{
            this.alert.style.display = 'none'
        })
    }
}
var alert1 = new AlertFn({el : '.alert1',
    p : '耶耶耶！成功！well done!'
})
var alert2 = new AlertFn({el:'.alert2',
    p:'耶耶耶！成功！well done!'
})
var alert3 = new AlertFn({el:'.alert3',
    bg:'rgb(96,191,128)',
    p:'耶耶耶！成功！well done!',
    span :'√'
})
var alert4 = new AlertFn({el:'.alert4',
    bg:'rgb(245,178,96)',
    h5:'Warning!警告！',
    p:'Warning！警告！well done!',
    span:'!'
})
var alert5 = new AlertFn({el:'.alert5',
    bg:'rgb(242,109,107)',
    h5:'Error!错误！',
    p:'Error!错误！',
    span:' ✖'
})
var alert6 = new AlertFn({el:'.alert6',
    p:'他自己，自从到城里来，又长高了一寸多。他自己觉出来，仿佛还得往高里长呢。不错，他的皮肤与模样都更硬棒与固定了一些'
})
class Confirm extends Click{
    constructor(obj){
        super(obj)
        this.clickFn()
    }
    clickFn(){
        this.el.addEventListener('click',()=>{
            this.alert = document.querySelector('.alert')
            this.alert.style.display = 'block'
            this.alert.innerHTML = `<div class="content">
                                        <div>
                                            <span>${this.span}</span>
                                            <div>
                                                <h5>${this.h5}</h5>
                                                <p>${this.p}</p>
                                            </div>
                                        </div>
                                        <div class='btns'><button id = 'ok'>确定</button><button>取消</button></div>                                     
                                    </div>`
            this.btn = document.querySelector('#ok')
            document.querySelector('span').style.color = this.bg
            this.btn.style.background = this.bg
            this.btnFn()
        })
    }
    btnFn(){
        this.btn.addEventListener('click',()=>{
            this.alert.style.display = 'none'
        })
    }
}

let Confirm1 = new Confirm({
    el:'.confirm1',
    h5:'确认成功？',
    p:'耶耶耶！成功！well done!',
    span:'？'
})
let confirm2 = new Confirm({
    el:'.confirm2',
    h5:'确认成功？',
    p:'耶耶耶！成功！well done!',
    bg:'rgb(245,178,96)',
    span:'!'
})